<!DOCTYPE html>
<html>
    <head>
        <title>Jdenticon</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <h1>"Icon04" - Should be equal - <span id="padding-percent"></span>% padding in style</h1>
        <figure class="padding-0-only">
            <img src="" width="100" height="100">
            <figcaption><strong>IMG</strong> static image</figcaption>
        </figure>

        <figure class="padding-30-only">
            <img src="" width="100" height="100">
            <figcaption><strong>IMG</strong> static image</figcaption>
        </figure>
    

        <figure>
            <canvas data-jdenticon-value="Icon04" width="100" height="100"></canvas>
            <figcaption><strong>Canvas</strong> data-jdenticon-value</figcaption>
        </figure>
        
        <figure>
            <canvas id="canvas-Jdenticon-update-value" width="100" height="100"></canvas>
            <figcaption><strong>Canvas</strong> update(value)</figcaption>
        </figure>
        
        <figure>
            <canvas id="canvas-Jdenticon-jquery-value" width="100" height="100"></canvas>
            <figcaption><strong>Canvas</strong> jQuery(value)</figcaption>
        </figure>
        
        <figure>
            <canvas id="canvas-Jdenticon-drawIcon-value" width="100" height="100"></canvas>
            <figcaption><strong>Canvas</strong> drawIcon(value)</figcaption>
        </figure>

        
        <figure>
            <svg data-jdenticon-value="Icon04" width="100" height="100"></svg>
            <figcaption><strong>SVG</strong> data-jdenticon-value</figcaption>
        </figure>
    
        <figure>
            <svg id="svg-Jdenticon-update-value" width="100" height="100"></svg>
            <figcaption><strong>SVG</strong> update(value)</figcaption>
        </figure>
        
        <figure>
            <svg id="svg-Jdenticon-jquery-value" width="100" height="100"></svg>
            <figcaption><strong>SVG</strong> jQuery(value)</figcaption>
        </figure>
        
        <figure>
            <span id="svg-Jdenticon-toSvg-value"></span>
            <figcaption><strong>SVG</strong> toSvg(value)</figcaption>
        </figure>
        
     
        <script>
            var padding = 0;

            // Load padding from query string
            var match = /\?padding=(\d+)/.exec(location.href);
            if (match) {
                padding = Number(match[1]);
            }

            document.getElementById("padding-percent").innerHTML = padding;

            var className = document.body.className;
            document.body.className = (className ? className + " " : "") + "padding-" + padding;

            var jdenticon_config = {
                padding: padding / 100,
                backColor: "#00f1",
            };
        </script>
        <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.slim.min.js"></script>
        <script src="/node_modules/jdenticon/dist/jdenticon.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/require1k@1.0.1/require1k.min.js"></script>
        <script>
            jdenticon.update("#canvas-Jdenticon-update-value,#svg-Jdenticon-update-value", "Icon04");

            var ctx = document.getElementById("canvas-Jdenticon-drawIcon-value").getContext("2d");
            jdenticon.drawIcon(ctx, "Icon04", 100);

            document.getElementById("svg-Jdenticon-toSvg-value").innerHTML = 
                jdenticon.toSvg("Icon04", 100);

            $("#canvas-Jdenticon-jquery-value,#svg-Jdenticon-jquery-value").jdenticon("Icon04");
        </script>
        <script src="common.js"></script>
    </body>
</html>